<template>
  <div class="eco-produce-container">

    <!-- 第一部分：大标题 -->
    <div class="title-section">
      <h1 class="title">生态产品展示</h1>
    </div>

    <!-- 第二部分：左右子标题 -->
    <div class="subtitle-section">
      <!-- 左侧内容：物质供给服务 -->
      <h2 class="gradient-title">物质供给服务</h2>

      <!-- 右侧内容：文化旅游 -->
      <h2 class="gradient-title">文化旅游</h2>
    </div>

    <!-- 第三部分：展示区域 -->
    <div class="display-section">
      <!-- 左侧空盒子 -->
<!--      <div class="empty-box">-->
<!--        <div class="left-content">-->
<!--          <ul class="service-list">-->
<!--            <li v-for="(item, index) in materialServices" :key="index" class="service-item">-->
<!--              <img :src="item.icon" alt="icon" class="service-icon"/>-->
<!--              <span class="service-name">{{ item.name }}</span>-->
<!--            </li>-->
<!--          </ul>-->
<!--        </div>-->

<!--      </div>-->

      <!-- 中间地图展示 -->

        <div class="content-map" style="height: 100%">
<!--          <produce25-dmap/>-->
          <eco-produce-map />
        </div>

      <!-- 右侧空盒子 -->
      <div class="empty-box">
        <div class="right-content">

          <ul class="culture-list">
            <li v-for="(item, index) in culturalTours" :key="index">
              <router-link :to="getRoute(item)" class="service-name">
                {{ item }}
              </router-link>
            </li>
          </ul>

        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import hehongcha from "@/assets/img/ecoProduce/hehongcha.png";
import hongyayu from "@/assets/img/ecoProduce/hongyayu.png";
import yanshantangfen from "@/assets/img/ecoProduce/yanshantangfen.png";
import maciguo from "@/assets/img/ecoProduce/maciguo.png";
import dengzhanguo from "@/assets/img/ecoProduce/dengzhanguo.png";
import EcoProduceMap from "@/views/ecoProduce/ecoProduceMap.vue";
import StyledImageText from "@/views/regionalPublicBrand/styledImageText.vue";
// 物质供给服务数据
const materialServices = ref([
  { icon: hehongcha, name: '河红茶' },
  { icon: hongyayu, name: '红芽芋' },
  { icon: yanshantangfen, name: '铅山烫粉' },
  { icon: maciguo, name: '麻糍粿' },
  { icon: dengzhanguo, name: '灯盏稞' }
]);

// 文化旅游数据
const culturalTours = ref([
  '河口明清古镇',
  '葛仙山',
  '黄岗山',
  '太源畲族乡',
  '四纸制作技艺'
]);

const getRoute = (name: string) => {
  switch (name) {
    case '河口明清古镇':
      return '/ecoProduce/product03';
    case '葛仙山':
      return '/ecoProduce/product03';
    case '黄岗山':
      return '/ecoProduce/product02';
    case '太源畲族乡':
      return '/ecoProduce/product03';
    case '四纸制作技艺':
      return '/ecoProduce/product02';
    default:
      return '/ecoProduce/product02';
  }
};


</script>

<style scoped>
.eco-produce-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  padding: 20px;
  color: #fff;
  box-sizing: border-box;
}

.title-section {
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
  background: linear-gradient(180.00deg, rgba(246, 241, 241, 1),rgba(133, 149, 166, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: '优设标题黑', serif; /* 字体设置 */
  font-size: 68px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 10px;

}

.subtitle-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 10px 80px;

}

.gradient-title {
  background: linear-gradient(180.00deg, rgba(246, 241, 241, 1),rgba(133, 149, 166, 1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-family: '优设标题黑', serif; /* 字体设置 */
  font-size: 48px;
  font-weight: 400;
  line-height: 62px;
  letter-spacing: 10px;
  text-align: justify;
}

.left-content, .right-content {
  width: 100%;
  margin: 50px 0;

}

.service-list, .culture-list {
  list-style: none;
  padding: 0;
}

.service-list li, .culture-list li {
  margin-bottom: 45px;
}

.service-item {
  display: flex;

  margin: 10px 0;
}

.service-icon {
  width: 60px;
  height: 60px;
  margin-right: 10px; /* 设置 icon 和 name 之间的间距 */
}

.service-name {
  /* 可以根据需要添加其他样式 */
  font-family: serif; /* 字体设置 */
  color: rgba(255, 255, 255, 1);
  font-size: 36px;

  text-align: justify;
}

.display-section {
  flex-grow: 1;
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.empty-box {
  width: 25%;
  background-color: #000;
  overflow-y: auto;
  padding: 10px;
}

.map-container {
  width: 45%;
  height: 100%;
  text-align: center;
}
</style>
